<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/calendarTime.min.css">
	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
	<script src="js/calendarTime.min.js"></script>
	<style>
		input[type=text]{width: 300px; height: 30px; margin-bottom: 40px; padding:0 10px; border:1px solid #eee; border-radius: 4px;}
	</style>
</head>
<body>

	<input type="text" id="cxcalendarTime" readonly="readonly" placeholder="日期时间选择">
	<input type="text" id="cxcalendarTime_date" readonly="readonly" placeholder="日期选择"><br>	
	<input type="text" id="cxcalendarTime_time" readonly="readonly" placeholder="时间选择">
	<input type="text" id="cxcalendarTime_area" readonly="readonly" placeholder="日期时间区间选择"><br>	
	<input type="text" id="cxcalendarTime_areadate" readonly="readonly" placeholder="日期区间选择">
	<input type="text" id="cxcalendarTime_areatime" readonly="readonly" placeholder="时间区间选择">
	<script>
	function selected(){
		console.log('ed')
	}
		$('#cxcalendarTime').calendarTime({
			isInputValue:true,//是否生成隐藏<input type="hidden" name="calendarTime" /> 默认false
			inputName:'calendarTime', //隐藏Input的名称,默认calendarTime
			isMini:false,//是否使用迷你样式，默认true,
			
			minTheDate:true //最小日期时间是否是当前时间 默认false 优先于minDate
		});//日期时间选择
		$('#cxcalendarTime_date').calendarTime({'type':'date'});//日期选择
		$('#cxcalendarTime_time').calendarTime({'type':'time',minDate:'1970-01-01 09:40',selected:function(){
			selected()
		}});//时间选择
		$('#cxcalendarTime_area').calendarTime({'isArea':true});//日期时间区间选择
		$('#cxcalendarTime_areadate').calendarTime({'type':'date','isArea':true});//日期区间选择
		$('#cxcalendarTime_areatime').calendarTime({'type':'time','isArea':true});//时间区间选择
	</script>
</body>
</html>